<template>
  <div class="page-container" >
    <el-header>
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">


        <div style="height:150px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px;">
          <el-row >
            <el-col :span="24"><div class="grid-content bg-purple-light" style="text-align: left;">当前操作进度</div></el-col>
            <el-col :span="24"><div class="grid-content" >
              <el-steps align-center :space="200" :active="active" finish-status="success">
                <el-step title="1.选择合同"></el-step>
                <el-step title="2.选择商品"></el-step>
                <el-step title="3.参数设置"></el-step>
              </el-steps>
              <el-button style="margin-top: 12px;" @click="preStep">上一步</el-button>
              <el-button style="margin-top: 12px;" @click="saveConfig">保存</el-button>
            </div></el-col>
          </el-row>
        </div>

      </div>
    </el-header>
    <el-main>
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px;">
        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
          <el-row :gutter="10" style="margin-bottom:10px">
            <el-col :span="6">
              <el-select size="small" v-model="select_income_tax" placeholder="请选择进项税率">
                <el-option
                 v-for="item in options_income_tax"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" size="small" plain>批量设置进项税率</el-button>
            </el-col>

            <el-col :span="6">
              <el-input v-model="includTaxPrice"  placeholder="含税采购价"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" size="small" plain>批量设置含税采购价</el-button>
            </el-col>

          </el-row>
          <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-form-item prop="merchantName">
              <el-input v-model="filters.merchantName" readonly placeholder="选择商家" @focus="queryMerchantList"></el-input>
            </el-form-item>
            <el-form-item prop="merchantId">
              <el-input style="display:none" v-model="filters.merchantId"  hidden placeholder="商家id"></el-input>
            </el-form-item>
            <el-form-item prop="supplierCode">
              <el-input v-model="filters.supplierCode" placeholder="供应商编码"></el-input>
            </el-form-item>
            <el-form-item prop="supplierName">
              <el-input v-model="filters.supplierName" placeholder="供应商名称"></el-input>
            </el-form-item>
            <el-form-item prop="contractCode">
              <el-input v-model="filters.contractCode" placeholder="合同编码"></el-input>
            </el-form-item>
            <el-row>
              <el-form-item>
                <kt-button
                  icon="fa fa-search"
                  :label="$t('action.search')"
                  type="primary"
                  @click="findPage(null)"
                />
              </el-form-item>
              <el-form-item>
                <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
          <el-form :inline="true" :size="size">
            <el-form-item>
              <el-button-group>
                <el-tooltip content="刷新" placement="top">
                  <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
                </el-tooltip>
                <el-tooltip content="列显示" placement="top">
                  <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
                </el-tooltip>
              </el-button-group>
            </el-form-item>
          </el-form>

        </div>
        <!--表格内容栏-->
        <cy-table
          :height="350"
          :data="pageResult"
          :columns="filterColumns"
          :showOperation="true"
          :showEditOperation="false"
          :showDeleteOperation="false"
          :showBatchDelete="true"
          @findPage="findPage"
          @handleDelete="handleDelete"
          @selectionChange="selectionChange"
          ref="CyTable"
        ></cy-table>
      </div>
    </el-main>

  </div>

</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/CyTable";
  import KtTable from "@/views/Core/KtTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  import utils from "@/assets/js/utils.js";

  export default {
    name: "ContractProductPriceStep3",

    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },

    data() {
      return {
        size: "small",
        includTaxPrice: "",
        checked: [],
        select_income_tax:"",
        options_income_tax:[{
          value: '',
          label: '请选择进项税率'
        },{
          value: '0',
          label: '0%'
        }, {
          value: '0.03',
          label: '3%'
        }, {
          value: '0.06',
          label: '6%'
        }, {
          value: '0.09',
          label: '9%'
        }, {
          value: '0.10',
          label: '10%'
        }, {
          value: '0.11',
          label: '11%'
        }, {
          value: '0.1236',
          label: '12.36%'
        }, {
          value: '0.13',
          label: '13%'
        }, {
          value: '0.16',
          label: '16%'
        }, {
          value: '0.17',
          label: '17%'
        }],
        filters: {
          merchantName:"",
          merchantId:"",
          supplierCode:"",
          supplierName:"",
          contractCode:"",
          res:{
            "total": 1,
            "code": "0000",
            "rows": [{
              "id": 10001,
              "contractId": null,
              "contractCode": null,
              "supplierCode": null,
              "mpId": 1909180000086379,
              "mpIdList": null,
              "mpCode": "1909180000086378",
              "mpName": "普通商品002",
              "mpBarcode": null,
              "mpMeasurementUnit": "千克",
              "mpSpec": null,
              "mpType": 1,
              "mpBrandCode": null,
              "mpBrandName": null,
              "mpConversionRate": null,
              "categoryId": "1909180000086100",
              "categoryCode": null,
              "categoryName": "代步工具",
              "saleWithTaxUnitAmt": null,
              "saleWithoutTaxUnitAmt": null,
              "saleTaxRate": null,
              "saleTaxAmt": null,
              "costWithTaxUnitAmt": null,
              "costWithoutTaxUnitAmt": null,
              "costTaxRate": null,
              "costTaxAmt": null,
              "purchaseCount": null,
              "actualPurchaseCount": null,
              "isValid": null,
              "settleRate": null,
              "settleType": null,
              "settleAmount": null,
              "remark": null,
              "currentPage": null,
              "itemsPerPage": null,
              "companyId": null,
              "isDeleted": null,
              "versionNo": null,
              "createUserid": null,
              "createUsername": null,
              "createTime": null,
              "serverIp": null,
              "updateUserid": null,
              "updateUsername": null,
              "updateTime": null,
              "checked": true,
              "minOrderQuantity": null,
              "maxOrderQuantity": null,
              "deliveryTerm": null,
              "contractType": null,
              "merchantId": null,
              "merchantCode": null,
              "merchantName": null,
              "list": null
            },
              {
                "id": 10002,
                "contractId": null,
                "contractCode": null,
                "supplierCode": null,
                "mpId": 1911060000466413,
                "mpIdList": null,
                "mpCode": "1911060000465847",
                "mpName": "测试商品002",
                "mpBarcode": null,
                "mpMeasurementUnit": "件",
                "mpSpec": null,
                "mpType": 1,
                "mpBrandCode": null,
                "mpBrandName": null,
                "mpConversionRate": null,
                "categoryId": "1909160000185958",
                "categoryCode": null,
                "categoryName": "米面粥",
                "saleWithTaxUnitAmt": null,
                "saleWithoutTaxUnitAmt": null,
                "saleTaxRate": 0.11,
                "saleTaxAmt": null,
                "costWithTaxUnitAmt": null,
                "costWithoutTaxUnitAmt": null,
                "costTaxRate": 0.1,
                "costTaxAmt": null,
                "purchaseCount": null,
                "actualPurchaseCount": null,
                "isValid": null,
                "settleRate": null,
                "settleType": null,
                "settleAmount": null,
                "remark": null,
                "currentPage": null,
                "itemsPerPage": null,
                "companyId": null,
                "isDeleted": null,
                "versionNo": null,
                "createUserid": null,
                "createUsername": null,
                "createTime": null,
                "serverIp": null,
                "updateUserid": null,
                "updateUsername": null,
                "updateTime": null,
                "checked": true,
                "minOrderQuantity": null,
                "maxOrderQuantity": null,
                "deliveryTerm": null,
                "contractType": null,
                "merchantId": null,
                "merchantCode": null,
                "merchantName": null,
                "list": null
              },
              {
                "id": 10003,
                "contractId": null,
                "contractCode": null,
                "supplierCode": null,
                "mpId": 1912250009921386,
                "mpIdList": null,
                "mpCode": "1912250009921383",
                "mpName": "直降商品",
                "mpBarcode": null,
                "mpMeasurementUnit": "件",
                "mpSpec": null,
                "mpType": 1,
                "mpBrandCode": null,
                "mpBrandName": null,
                "mpConversionRate": null,
                "categoryId": "1909220000112658",
                "categoryCode": null,
                "categoryName": "安抚玩偶",
                "saleWithTaxUnitAmt": null,
                "saleWithoutTaxUnitAmt": null,
                "saleTaxRate": 0.11,
                "saleTaxAmt": null,
                "costWithTaxUnitAmt": null,
                "costWithoutTaxUnitAmt": null,
                "costTaxRate": 0.1,
                "costTaxAmt": null,
                "purchaseCount": null,
                "actualPurchaseCount": null,
                "isValid": null,
                "settleRate": null,
                "settleType": null,
                "settleAmount": null,
                "remark": null,
                "currentPage": null,
                "itemsPerPage": null,
                "companyId": null,
                "isDeleted": null,
                "versionNo": null,
                "createUserid": null,
                "createUsername": null,
                "createTime": null,
                "serverIp": null,
                "updateUserid": null,
                "updateUsername": null,
                "updateTime": null,
                "checked": false,
                "minOrderQuantity": null,
                "maxOrderQuantity": null,
                "deliveryTerm": null,
                "contractType": null,
                "merchantId": null,
                "merchantCode": null,
                "merchantName": null,
                "list": null
              },
              {
                "id": 10004,
                "contractId": null,
                "contractCode": null,
                "supplierCode": null,
                "mpId": 1912250009947625,
                "mpIdList": null,
                "mpCode": "1912250009947624",
                "mpName": "折扣商品",
                "mpBarcode": null,
                "mpMeasurementUnit": "件",
                "mpSpec": null,
                "mpType": 1,
                "mpBrandCode": null,
                "mpBrandName": null,
                "mpConversionRate": null,
                "categoryId": "1909160000185958",
                "categoryCode": null,
                "categoryName": "米面粥",
                "saleWithTaxUnitAmt": null,
                "saleWithoutTaxUnitAmt": null,
                "saleTaxRate": 0.11,
                "saleTaxAmt": null,
                "costWithTaxUnitAmt": null,
                "costWithoutTaxUnitAmt": null,
                "costTaxRate": 0.1,
                "costTaxAmt": null,
                "purchaseCount": null,
                "actualPurchaseCount": null,
                "isValid": null,
                "settleRate": null,
                "settleType": null,
                "settleAmount": null,
                "remark": null,
                "currentPage": null,
                "itemsPerPage": null,
                "companyId": null,
                "isDeleted": null,
                "versionNo": null,
                "createUserid": null,
                "createUsername": null,
                "createTime": null,
                "serverIp": null,
                "updateUserid": null,
                "updateUsername": null,
                "updateTime": null,
                "checked": false,
                "minOrderQuantity": null,
                "maxOrderQuantity": null,
                "deliveryTerm": null,
                "contractType": null,
                "merchantId": null,
                "merchantCode": null,
                "merchantName": null,
                "list": null
              }]
          }
        },
        columns: [
          {prop: "storeCode", label: "店铺编码", minWidth: 80},
          {prop: "mpId", label: "商家商品id", minWidth: 80,},
          {prop: "storeName", label: "店铺名称", minWidth: 60},
          {prop: "mpCode", label: "商品编码", minWidth: 60},
          {prop: "mpName", label: "商品名称", minWidth: 60},
          {prop: "mpMeasurementUnit", label: "主计量单位", minWidth: 60},
          // {prop: "mpMeasurementUnit", label: "采购单位", minWidth: 120},
          {prop: "mpPurchaseUnitRate", label: "转换率", minWidth: 70},
          {prop: "currencyCode", label: "交易币别", minWidth: 60},
          {prop: "mpSpec", label: "商品规格", minWidth: 80},
          {prop: "costTaxRate", label: "含税采购价", minWidth: 80},
          // {prop: "costTaxRate", label: "税率", minWidth: 80},
          {prop: "costWithoutTaxUnitAmt", label: "未税采购价", minWidth: 80},
          {prop: "minOrderQuantity", label: "起订量", minWidth: 80},
          {prop: "maxOrderQuantity", label: "限定量", minWidth: 80},
          {prop: "deliveryTerm", label: "交货期限", minWidth: 80},
          {
            prop: "distributionChannel", label: "运输方式", minWidth: 80
          },
          {prop: "isIncludingDeliveryFee", label: "是否含运费", minWidth: 80, formatter: function(value, row, index) {
              return '<input type="checkbox" name="checkDeliveryFee" value="' + value + '"/>'}
          }
        ],

        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},

        editLoading: false,
        active: null
      };

    },

    methods :{
      queryMerchantList: function () {
        this.editDialogVisible =true;
      },

      // 获取分页数据
      findPage: function (data) {
        this.$refs.CyTable.findPageStaticState(this.filters);
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },

      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },

      // 处理表格列过滤显示
      initColumns: function () {
        let temp = [];

        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },

      preStep: function() {
        var this_ =this;
        this.$router.push({ path:'/paje/ContractTemplate/ContractProductPriceStep2',query:{killid: 1}});
      },

      saveConfig: function() {
        var this_ =this;
        this_.active =3;
      },

      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.findPage(null);
        }
      },

      clickProduct: function (index,row){
        let this_ =this;
        console.log(index,row);
      },

      //选择框
      selectionChange: function (params) {
        console.log(params);
        this.checked = params.selections
      },
      // 批量删除
      handleDelete: function (data) {
        let this_ =this;
        if (data != null && data.params != null && data.params.length > 0) {
          let ids = [];
          for (let i = 0; i < data.params.length; i++) {
            ids.push(parseInt(data.params[i].id));
          }
          console.log('ids=='+ids);
          console.log('idstype=='+typeof(ids));
          let userTables = this_.filters.res.rows;
          for (let j = 0; j < userTables.length; j++) {
            console.log('========='+userTables[j].id);
            console.log(ids.indexOf(userTables[j].id));
            console.log('typeof ===='+typeof(userTables[j].id));
            if (ids.indexOf(userTables[j].id) > -1) {
              userTables.splice(j,1);
            }
          }

          // console.log(leftObjs);
          // this_.filters.res.rows =leftObjs;
          // this_.findPage(null);

          this_.$message({message: "操作成功", type: "success"});
          // var params = {};
          // params.t = "changeProduct";
          // params.ids = ids;
          // var this_ = this;
          // this.utils.request.deleteUserInfo(params, function (res) {
          //   if (res.code == "0000") {
          //     this_.$message({message: "操作成功", type: "success"});
          //     this_.findPage(null);
          //   } else {
          //     this_.$message({message: "操作失败, " + res.msg, type: "error"});
          //   }
          // });
        }
      }
    },
    mounted() {
      this.active =1;
      this.initColumns();
    }
  }



</script>

<style scoped>
  /deep/ .form .el-input__inner{
    width: 200px !important;
  }
</style>
